<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程评价</title>
    <style>
        body { background: #f6f8fa; font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; }
        .container { max-width: 700px; margin: 40px auto; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px #e0e7ff; padding: 32px 36px; }
        .review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
        .review-title { font-size: 22px; font-weight: 600; color: #1677ff; display: flex; align-items: center; }
        .review-title i { display: inline-block; width: 22px; height: 22px; background: url('data:image/svg+xml;utf8,<svg fill="white" stroke="%231677ff" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center/cover; margin-right: 8px; }
        .review-anonymous { font-size: 14px; color: #888; }
        .review-stars { margin-bottom: 10px; }
        .star { font-size: 28px; color: #ccc; cursor: pointer; transition: color 0.2s; }
        .star.selected, .star.hover { color: #faad14; }
        textarea { width: 100%; height: 70px; border-radius: 6px; border: 1px solid #ddd; padding: 10px; font-size: 15px; resize: vertical; margin-bottom: 10px; }
        .review-actions { text-align: right; }
        #submit-review { background: #1677ff; color: #fff; border: none; border-radius: 6px; padding: 8px 28px; font-size: 16px; cursor: pointer; transition: background 0.2s; }
        #submit-review:hover { background: #145ecb; }
        .review-stats { display: flex; align-items: center; gap: 32px; margin: 28px 0 18px 0; }
        .avg-score { font-size: 32px; color: #faad14; font-weight: bold; }
        .total-count { color: #888; font-size: 15px; }
        .star-distribution { flex: 1; }
        .star-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
        .star-bar .bar { height: 8px; border-radius: 4px; background: #e6f0ff; flex: 1; margin: 0 6px; }
        .star-bar .bar-inner { height: 8px; border-radius: 4px; background: #faad14; }
        .review-list { margin-top: 18px; }
        .review-card { background: #f8faff; border-radius: 10px; box-shadow: 0 1px 4px #f0f1f2; padding: 16px 20px; margin-bottom: 16px; position: relative; }
        .review-user { font-weight: 600; color: #1677ff; }
        .review-time { color: #aaa; font-size: 12px; margin-left: 10px; }
        .review-content { margin: 8px 0 6px 0; font-size: 15px; white-space: pre-line; }
        .review-score { color: #faad14; font-size: 16px; margin-right: 8px; }
        .review-actions-row { display: flex; align-items: center; gap: 18px; font-size: 14px; color: #888; }
        .review-actions-row .like, .review-actions-row .delete { cursor: pointer; }
        .review-actions-row .like.liked { color: #1677ff; }
        .review-actions-row .delete { color: #ff4d4f; }
        .review-pagination { text-align: center; margin: 18px 0 0 0; }
        .review-pagination button { background: #eee; border: none; border-radius: 4px; padding: 4px 12px; margin: 0 2px; cursor: pointer; }
        .review-pagination button.active { background: #1677ff; color: #fff; }
    </style>
</head>
<body>
<div class="container">
    <div class="review-header">
        <span class="review-title"><i></i> 课程评价</span>
        <span class="review-anonymous"><input type="checkbox" id="anonymous" checked> 匿名</span>
    </div>
    <div class="review-stars" id="star-bar"></div>
    <textarea id="review-content" placeholder="说说你对本课程的真实看法吧..." maxlength="300"></textarea>
    <div class="review-actions">
        <button id="submit-review">提交评价</button>
    </div>
    <div class="review-stats">
        <div class="avg-score" id="avg-score">-</div>
        <div class="total-count">共 <span id="total-count">-</span> 条评价</div>
        <div class="star-distribution" id="star-distribution"></div>
    </div>
    <div style="display:flex;justify-content:flex-end;gap:10px;margin-bottom:8px;">
        <button id="sort-hot" style="padding:4px 12px;border:none;border-radius:4px;background:#eee;color:#333;cursor:pointer;">最热</button>
        <button id="sort-new" style="padding:4px 12px;border:none;border-radius:4px;background:#eee;color:#333;cursor:pointer;">最新</button>
    </div>
    <div class="review-list" id="review-list"></div>
    <div class="review-pagination" id="review-pagination"></div>
</div>
<script>
const courseId = 1; // TODO: 替换为实际课程ID
let currentScore = 0;
let currentSort = 'hot';
let currentPage = 1;
const pageSize = 5;

function renderStars(score) {
    let html = '';
    for(let i=1;i<=5;i++) {
        let cls = 'star';
        if(score >= i) cls += ' selected';
        else if(score >= i-0.5) cls += ' selected';
        html += `<span class="${cls}" data-val="${i}">★</span>`;
    }
    document.getElementById('star-bar').innerHTML = html;
}
renderStars(0);
document.getElementById('star-bar').onmousemove = function(e) {
    if(e.target.classList.contains('star')) {
        let val = Number(e.target.getAttribute('data-val'));
        renderStars(val);
    }
};
document.getElementById('star-bar').onmouseleave = function() {
    renderStars(currentScore);
};
document.getElementById('star-bar').onclick = function(e) {
    if(e.target.classList.contains('star')) {
        currentScore = Number(e.target.getAttribute('data-val'));
        renderStars(currentScore);
    }
};

document.getElementById('submit-review').onclick = function() {
    const content = document.getElementById('review-content').value.trim();
    const anonymous = document.getElementById('anonymous').checked;
    if(!currentScore) return alert('请先选择评分！');
    if(!content) return alert('评价内容不能为空！');
    fetch('/api/review', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ courseId, score: currentScore, content, anonymous })
    }).then(res => res.json()).then(data => {
        if(data.success) {
            alert('评价成功！');
            document.getElementById('review-content').value = '';
            currentScore = 0;
            renderStars(0);
            loadReviews(1, currentSort);
        } else {
            alert(data.message || '提交失败');
        }
    });
};

document.getElementById('sort-hot').onclick = function() { currentSort = 'hot'; loadReviews(1, 'hot'); };
document.getElementById('sort-new').onclick = function() { currentSort = 'new'; loadReviews(1, 'new'); };

function renderStarDistribution(starStats, total) {
    let html = '';
    for(let i=5;i>=1;i--) {
        const count = starStats[i] || 0;
        const percent = total ? Math.round(count/total*100) : 0;
        html += `<div class="star-bar"><span style="color:#faad14;">${'★'.repeat(i)}</span><div class="bar"><div class="bar-inner" style="width:${percent}%;"></div></div><span style="min-width:30px;">${count}</span></div>`;
    }
    document.getElementById('star-distribution').innerHTML = html;
}

function renderReviewList(reviews) {
    let html = '';
    reviews.forEach(r => {
        html += `<div class="review-card">
            <div><span class="review-user">${r.anonymous ? '匿名用户' : (r.userName||'用户')}</span><span class="review-time">${r.createdAt ? r.createdAt.replace('T',' ').slice(0,16) : ''}</span></div>
            <div class="review-content">${r.content}</div>
            <div class="review-actions-row">
                <span class="review-score">${'★'.repeat(r.score)}</span>
                <span class="like${r.liked ? ' liked' : ''}" data-id="${r.id}">👍 ${r.likes||0}</span>
                ${r.isMine ? `<span class="delete" data-id="${r.id}">删除</span>` : ''}
            </div>
        </div>`;
    });
    document.getElementById('review-list').innerHTML = html;
    // 点赞
    document.querySelectorAll('.like').forEach(el => {
        el.onclick = function() {
            const id = this.getAttribute('data-id');
            fetch('/api/review/like', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ id })
            }).then(res => res.json()).then(data => {
                if(data.success) loadReviews(currentPage, currentSort);
            });
        };
    });
    // 删除
    document.querySelectorAll('.delete').forEach(el => {
        el.onclick = function() {
            if(!confirm('确定删除这条评价吗？')) return;
            const id = this.getAttribute('data-id');
            fetch('/api/review/' + id, { method: 'DELETE' })
                .then(res => res.json()).then(data => {
                    if(data.success) loadReviews(currentPage, currentSort);
                });
        };
    });
}

function renderPagination(total, page) {
    const pageCount = Math.ceil(total / pageSize);
    let html = '';
    for(let i=1;i<=pageCount;i++) {
        html += `<button class="${i===page?'active':''}" onclick="loadReviews(${i},'${currentSort}')">${i}</button>`;
    }
    document.getElementById('review-pagination').innerHTML = html;
}

function loadReviews(page=1, sort='hot') {
    currentPage = page;
    fetch(`/api/review/list?courseId=${courseId}&page=${page}&size=${pageSize}&sort=${sort}`)
        .then(res => res.json())
        .then(data => {
            document.getElementById('avg-score').innerText = data.avgScore ? data.avgScore.toFixed(1) : '-';
            document.getElementById('total-count').innerText = data.total || 0;
            renderStarDistribution(data.starStats || {}, data.total || 0);
            renderReviewList(data.reviews || []);
            renderPagination(data.total || 0, page);
        });
}

loadReviews();
</script>
</body>
</html> 